<template>
	<view class="container">
		<!-- 头部导航 -->
		<page-navbar title="添加成员" backgroundColor="#56ab2f00" :showBack="true"></page-navbar>

		<!-- 主要内容区域 -->
		<scroll-view class="content" scroll-y="true" :show-scrollbar="false">
			<!-- 表单卡片 -->
			<view class="form-card">
				<view class="form-header">
					<view class="form-title-wrapper">
						<svg-icon name="group" size="32" />
						<text class="form-title">成员信息</text>
					</view>
					<text class="form-subtitle">请填写完整的成员信息</text>
				</view>

				<view class="form-body">
					<!-- 姓名 -->
					<view class="form-item">
						<view class="form-label">
							<svg-icon name="user" size="28" />
							<text class="label-text">姓名</text>
							<text class="required">*</text>
						</view>
						<uni-easyinput class="form-input" v-model="formData.name" @input="debouncedValidateName"
							placeholder="请输入真实姓名" />
						<view class="error-message" v-if="errors.name">{{ errors.name }}</view>
					</view>

					<!-- 身份证号 -->
					<view class="form-item">
						<view class="form-label">
							<svg-icon name="id-card" size="28" />
							<text class="label-text">身份证号</text>
							<text class="required">*</text>
						</view>
						<uni-easyinput class="form-input" v-model="formData.idCard" @input="debouncedValidateIdCard"
							placeholder="请输入身份证号" />
						<view class="error-message" v-if="errors.idCard">{{ errors.idCard }}</view>
					</view>

					<!-- 联系方式 -->
					<view class="form-item">
						<view class="form-label">
							<svg-icon name="phone" size="28" />
							<text class="label-text">联系方式</text>
							<text class="required">*</text>
						</view>
						<uni-easyinput class="form-input" v-model="formData.phone" @input="debouncedValidatePhone"
							placeholder="请输入手机号" />
						<view class="error-message" v-if="errors.phone">{{ errors.phone }}</view>
					</view>
				</view>
			</view>

			<!-- 温馨提示 -->
			<view class="tips-card">
				<view class="tips-header">
					<svg-icon name="lightbulb" size="28" />
					<text class="tips-title">温馨提示</text>
				</view>
				<view class="tips-body">
					<text class="tips-item">1. 请确保填写的信息真实有效，以免影响您的预订。</text>
					<text class="tips-item">2. 身份证信息将用于身份验证，请务必准确填写。</text>
					<text class="tips-item">3. 我们会保护您的个人信息安全，请放心填写。</text>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>

		<!-- 底部提交按钮 -->
		<view class="submit-btn-wrapper">
			<button class="submit-btn" @click="submitForm" :disabled="!isFormValid">
				<text class="btn-text">保存</text>
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import api from "@/api"
import SvgIcon from '@/components/svg-icon/svg-icon.vue'

// 表单数据
const formData = reactive({
	name: '',
	idCard: '',
	phone: ''
});

// 错误信息
const errors = reactive({
	name: '',
	idCard: '',
	phone: ''
});

// 计算表单是否有效
const isFormValid = computed(() => {
	return formData.name.trim() !== '' &&
		formData.idCard.trim() !== '' &&
		formData.phone.trim() !== '' &&
		!errors.name &&
		!errors.idCard &&
		!errors.phone;
});

onLoad((options) => {
	console.log('添加成员页面加载');
});

onMounted(() => { });

// 防抖函数
const debounce = (func, delay) => {
	let timeoutId;
	return (...args) => {
		clearTimeout(timeoutId);
		timeoutId = setTimeout(() => func.apply(this, args), delay);
	};
};

// 防抖验证函数
const debouncedValidateName = debounce(() => {
	validateName();
}, 500);

const debouncedValidateIdCard = debounce(() => {
	validateIdCard();
}, 500);

const debouncedValidatePhone = debounce(() => {
	validatePhone();
}, 500);

// 验证姓名
const validateName = () => {
	const name = formData.name.trim();
	if (!name) {
		errors.name = '请输入姓名';
		return false;
	}
	if (name.length < 2) {
		errors.name = '姓名至少2个字符';
		return false;
	}
	if (name.length > 10) {
		errors.name = '姓名不能超过10个字符';
		return false;
	}
	// 检查是否包含特殊字符
	const nameRegex = /^[\u4e00-\u9fa5a-zA-Z]+$/;
	if (!nameRegex.test(name)) {
		errors.name = '姓名只能包含中文和英文';
		return false;
	}
	errors.name = '';
	return true;
};

// 验证身份证号
const validateIdCard = () => {
	const idCard = formData.idCard.trim();
	if (!idCard) {
		errors.idCard = '请输入身份证号';
		return false;
	}
	if (idCard.length !== 18) {
		errors.idCard = '身份证号必须为18位';
		return false;
	}
	// 简单的身份证号格式验证
	const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
	if (!idCardRegex.test(idCard)) {
		errors.idCard = '身份证号格式不正确';
		return false;
	}
	errors.idCard = '';
	return true;
};

// 验证手机号
const validatePhone = () => {
	const phone = formData.phone.trim();
	if (!phone) {
		errors.phone = '请输入手机号';
		return false;
	}
	if (phone.length !== 11) {
		errors.phone = '手机号必须为11位';
		return false;
	}
	// 手机号格式验证
	const phoneRegex = /^1[3-9]\d{9}$/;
	if (!phoneRegex.test(phone)) {
		errors.phone = '手机号格式不正确';
		return false;
	}
	errors.phone = '';
	return true;
};

// 提交表单
const submitForm = () => {
	// 最终验证
	const isNameValid = validateName();
	const isIdCardValid = validateIdCard();
	const isPhoneValid = validatePhone();

	if (!isNameValid || !isIdCardValid || !isPhoneValid) {
		uni.showToast({
			title: '请检查输入信息',
			icon: 'none'
		});
		return;
	}
	api.userApi.addTourist(formData).then(res => {
		console.log(res);
		uni.showToast({
			title: '添加成功！',
			icon: 'success',
			duration: 2000
		});

		// 返回上一页
		setTimeout(() => {
			uni.navigateBack();
		}, 2000);
	})
};
</script>

<style lang="scss" scoped>
.container {
	background: linear-gradient(180deg, #89d466 0%, #f5f5f5 40%, #f5f5f5 100%);
	min-height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.content {
	flex: 1;
	padding: 20rpx 30rpx 120rpx;
	box-sizing: border-box;
}

/* 表单卡片 */
.form-card {
	background: white;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(86, 171, 47, 0.1);
	overflow: hidden;

	.form-header {
		background: linear-gradient(135deg, rgba(86, 171, 47, 0.1), rgba(168, 230, 207, 0.1));
		padding: 30rpx;
		text-align: center;
		border-bottom: 1rpx solid rgba(86, 171, 47, 0.1);

		.form-title-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12rpx;
			margin-bottom: 10rpx;
		}

		.form-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.form-subtitle {
			display: block;
			font-size: 24rpx;
			color: #666;
		}
	}

	.form-body {
		padding: 40rpx 30rpx;
	}
}

/* 表单项 */
.form-item {
	margin-bottom: 40rpx;

	&:last-child {
		margin-bottom: 0;
	}

	.form-label {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		gap: 10rpx;

		.label-text {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}

		.required {
			color: #ff4757;
			font-size: 28rpx;
			margin-left: 5rpx;
		}
	}

	.form-input {
		width: 100%;
		height: 88rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #333;
		transition: all 0.3s ease;
		box-sizing: border-box;

		&:focus {
			background: white;
			border-color: #56ab2f;
			box-shadow: 0 0 0 4rpx rgba(86, 171, 47, 0.1);
		}

		&.error {
			border-color: #ff4757;
			background: rgba(255, 71, 87, 0.05);
		}

		&::placeholder {
			color: #999;
		}
	}

	.error-message {
		display: block;
		color: #ff4757;
		font-size: 22rpx;
		margin-top: 10rpx;
		margin-left: 5rpx;
	}
}

/* 温馨提示卡片 */
.tips-card {
	background: white;
	border-radius: 16rpx;
	padding: 25rpx;
	box-shadow: 0 2rpx 10rpx rgba(86, 171, 47, 0.08);

	.tips-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		gap: 10rpx;

		.tips-title {
			font-size: 26rpx;
			font-weight: 500;
			color: #333;
		}
	}

	.tips-body {
		.tips-item {
			display: block;
			font-size: 24rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 8rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.bottom-placeholder {
	height: 120rpx;
}

/* 底部提交按钮 */
.submit-btn-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	border-top: 1rpx solid rgba(86, 171, 47, 0.1);
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #56ab2f, #a8e6cf);
		border-radius: 44rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(86, 171, 47, 0.4);
		transition: all 0.3s ease;

		&:active:not(.disabled) {
			transform: scale(0.98);
			box-shadow: 0 4rpx 16rpx rgba(86, 171, 47, 0.6);
		}

		&.disabled {
			background: #ccc;
			box-shadow: none;
		}

		.btn-text {
			color: white;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}
</style>
